<!DOCTYPE html>
<html lang="en">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  <link rel="icon" href="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
  <title>JS 常用的数组方法 | 小崔的博客</title>
  <meta name="author" content="cuishikang" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="数组方法" />
  
  <meta name="description" content="::: tip 介绍JS 常用的数组方法合集:::">
<meta property="og:type" content="article">
<meta property="og:title" content="JS 常用的数组方法">
<meta property="og:url" content="https://cuishikang.gitee.io/2021/06/24/JavaScript/0.4_Arr_Method/index.html">
<meta property="og:site_name" content="小崔的博客">
<meta property="og:description" content="::: tip 介绍JS 常用的数组方法合集:::">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta property="article:published_time" content="2021-06-23T16:00:00.000Z">
<meta property="article:modified_time" content="2022-02-19T11:56:33.306Z">
<meta property="article:author" content="cuishikang">
<meta property="article:tag" content="数组方法">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta name="twitter:site" content="@null">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/css/kratosr.min.css" type="text/css" media="all">
  
    <link rel="stylesheet" id="highlight-css" href="/css/highlight/night-eighties.min.css" type="text/css" media="all">
  
  
  <link rel="stylesheet" id="fontawe-css" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css" media="all">
  <link rel="stylesheet" id="nprogress-css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" type="text/css" media="all">
  
  
    <link rel="stylesheet" href="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css">
  
  
    <link rel="stylesheet" href="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
  
  
    <link rel="stylesheet" id="darkmode-css" href="/css/kr-dark.min.css" type="text/css" media="all">
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="https://unpkg.com/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
      .kratos-cover.kratos-cover-2 {
        background-image: url('/images/banner.webp');
      }
    
    
      @media(min-width:768px) {
        body.custom-background {
          background-image: url('/images/bg.webp');
        }
      }
    
  </style>
  
<meta name="generator" content="Hexo 6.0.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                        <li><a href="/"><i class="fa fa-home"></i>首页</a></li>
                                    
                                
                                    
                                        <li><a href="/archives/"><i class="fa fa-file"></i>档案馆</a></li>
                                    
                                
                                    
                                        <li><a href="/friends/"><i class="fa fa-paw"></i>好伙伴</a></li>
                                    
                                
                                    
                                        <li>
                                            <a><i class="fa fa-link"></i>关于本人</a>
                                            <ul class="sub-menu">
                                                
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang"><i class="fa fa-git"></i>码云</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang/tmp/raw/master/img/2201645358312_.pic.jpg"><i class="fa fa-weixin"></i>微信</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://www.zhihu.com/people/fu-xi-ting-67-17-5"><i class="fa  fa-search"></i>知乎</a></li>
                                                    
                                                
                                                    
                                                        <li><a href="http://cuishikang.gitee.io/my_resume/#/"><i class="fa  fa-file-o"></i>简历</a></li>
                                                    
                                                
                                            </ul>
                                        </li>
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/">小崔的博客</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/">
                        <h2>小崔的博客</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article>
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center">JS 常用的数组方法</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><i class="fa fa-calendar"></i> 2021-06-24</li>
                <li><i class="fa fa-user"></i> 作者 cuishikang</li>
                <li>
                    <i class="fa fa-edit"></i> 
                    
                    
                        ~8.38K
                    
                    字
                </li>
                
            </ul>
        </header>
        <div class="kratos-post-content">
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                本文最后编辑于 <time datetime="1645271793306"></time> 前，其中的内容可能需要更新。
            </div>
            
            <hr />
            <p>::: tip 介绍<br>JS 常用的数组方法合集<br><br>:::</p>
<span id="more"></span>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Array</span>.<span class="title function_">join</span>(<span class="string">&quot;&quot;</span>) 						<span class="comment">//拼接 如果有参数就在其中拼接</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item,index</span>)=&gt;</span>&#123;&#125;)		<span class="comment">//遍历</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">reverse</span>(<span class="string">&quot;&quot;</span>)         <span class="comment">//反转数组排列</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">sort</span>(<span class="function">(<span class="params">a,b</span>)=&gt;</span>a-b)		<span class="comment">//排序 a-b为正排,b-a为倒排</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">push</span>(<span class="string">&quot;&quot;</span>)						<span class="comment">//添加(从后)</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">unshift</span>(<span class="string">&quot;&quot;</span>)					<span class="comment">//添加(从前)</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">concat</span>(<span class="string">&quot;&quot;</span>)          <span class="comment">//将参数添加到原数组中</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">shift</span>(<span class="string">&quot;&quot;</span>)           <span class="comment">//删除第一项</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">pop</span>(<span class="string">&quot;&quot;</span>)             <span class="comment">//删除最后一项</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">slice</span>(<span class="string">&quot;&quot;</span>)           <span class="comment">//根据参数删除对应下标内容</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">splice</span>(下标,删几个,填充位)	   <span class="comment">//删除 从下标删除,删除xx个,替换为xxx 返回删除数据</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">indexOf</span>(<span class="string">&quot;&quot;</span>)					<span class="comment">//查找 找到返回下标,找不到返-1</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">includes</span>(<span class="string">&quot;&quot;</span>)        <span class="comment">//查找某元素是否包含在数组中,返回Boolean值</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span>=&gt;</span>&#123;<span class="keyword">return</span> 筛选条件&#125;)<span class="comment">//筛选  筛选后返回新数组</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">find</span>(<span class="function"><span class="params">item</span>=&gt;</span>&#123;<span class="keyword">return</span> 筛选条件&#125;	 <span class="comment">//筛选  筛选后返回新对象</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">map</span>(<span class="function"><span class="params">item</span>=&gt;</span>&#123;<span class="keyword">return</span> 重组解构&#125;)	 <span class="comment">//重组</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">some</span>(<span class="function"><span class="params">item</span>=&gt;</span>&#123;<span class="keyword">return</span> 条件判断&#125;)	 <span class="comment">//判断  数组中是否拥有符合条件数据,返回布尔值 (有true则true,全无true则false)</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">every</span>(<span class="function"><span class="params">item</span>=&gt;</span>&#123;<span class="keyword">return</span> 条件判断&#125;) <span class="comment">//判断  数组中数据是否全部满足条件,返布尔值  (有false则false,无false则true)</span></span><br></pre></td></tr></table></figure>



<h2 id="map-item-gt-重组解构-处理数组方法-重组"><a href="#map-item-gt-重组解构-处理数组方法-重组" class="headerlink" title="map(item=&gt;{重组解构}) 处理数组方法(重组)"></a><code>map(item=&gt;&#123;重组解构&#125;)</code> 处理数组方法(重组)</h2><blockquote>
<p>map后的数据类型: [{id:’’,name:’’,seq:’’},{},{}………]</p>
</blockquote>
<ul>
<li>map() 方法返回一个<code>新数组</code>，数组中的元素为原始数组元素调用函数处理后的值</li>
<li>map() 具有两个参数 一个是原数据(item) 一个是索引值(index)</li>
<li>map可以作用于 对遍历的每一项数据 进行加工 让其变为新的数组。</li>
<li>map() 方法会遍历出一个新的数组(无需存储) 拿来用即可<ul>
<li>用于数组中的每一项数据进行处理 最后返回一个新的数组</li>
<li>可以用于 给数组添加新的属性名</li>
</ul>
</li>
</ul>
<blockquote>
<p>对每一个现有频道进行排序 并且添加一些属性</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//! 对每一个现有频道进行排序（添加一个seq属性进行编号和其他数据）</span></span><br><span class="line">    <span class="comment">//! 先对之前的频道排序 利用map方法(包含index参数) 往里面添加 频道序列号</span></span><br><span class="line">    <span class="keyword">const</span> orderChannels = <span class="variable language_">this</span>.<span class="property">channels</span>.<span class="title function_">map</span>(<span class="function">(<span class="params">item, index</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        <span class="comment">//! 添加频道数据的id</span></span><br><span class="line">        <span class="attr">id</span>: item.<span class="property">id</span>,</span><br><span class="line">        <span class="comment">//! 添加频道数据的名称</span></span><br><span class="line">        <span class="attr">name</span>: item.<span class="property">name</span>,</span><br><span class="line">        <span class="comment">//! 添加频道数据的 索引(map自带)</span></span><br><span class="line">        <span class="attr">seq</span>: index</span><br><span class="line">      &#125;)</span><br><span class="line"><span class="comment">// 数据类型: [&#123;id:&#x27;&#x27;,name:&#x27;&#x27;,seq:&#x27;&#x27;&#125;,&#123;&#125;,&#123;&#125;.........]</span></span><br></pre></td></tr></table></figure>

<h2 id="filter-item-gt-筛选条件-筛选数组方法"><a href="#filter-item-gt-筛选条件-筛选数组方法" class="headerlink" title="filter(item=&gt;{筛选条件}) 筛选数组方法"></a><code>filter(item=&gt;&#123;筛选条件&#125;)</code> 筛选数组方法</h2><blockquote>
<p>返回的数据类型是 布尔值 符合条件 true 不符合 false</p>
</blockquote>
<ul>
<li>filter() 方法创建一个<code>新数组</code>，新数组中的元素是通过检查指定数组中符合条件的所有元素。<ul>
<li><strong>注意</strong>：filter() 不会对空数组进行检测。</li>
<li><strong>注意</strong>： filter() 不会改变原始数组。</li>
</ul>
</li>
</ul>
<blockquote>
<p>在数组筛选能被2整除的数据</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">56</span>, <span class="number">15</span>, <span class="number">48</span>, <span class="number">3</span>, <span class="number">7</span>];</span><br><span class="line"><span class="keyword">let</span> newArr = arr.<span class="title function_">filter</span>(<span class="keyword">function</span> (<span class="params">value, index, array</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> value % <span class="number">2</span> === <span class="number">0</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(newArr)</span><br><span class="line"><span class="comment">// [56, 48]</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>配合 <code>some()</code> 检测数组中的元素是否满足指定条件(取反) 再<code>filter()</code>储存不满足条件数据</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">    optionChannels () &#123;</span><br><span class="line"><span class="comment">// ? 进行筛选 filter()方法进行数据总筛选 接收some()传来的true(取反值) 代表不存在的数据为true filter() 方法储存不存在的数据即可</span></span><br><span class="line"><span class="comment">// ? filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素</span></span><br><span class="line">        </span><br><span class="line">      <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">allChannels</span>.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123; <span class="comment">// allChannels 是全部频道数据 channels是我的频道数据</span></span><br><span class="line">        <span class="comment">// ? 进行符合条件筛选 some() 并且取反 把不满足条件的取反变成true 返回给filter()筛选器</span></span><br><span class="line">        <span class="comment">// ?  some()方法作用：判断数组中是否包含符合条件的数据，只要有一项符合，就返回true</span></span><br><span class="line">        <span class="keyword">return</span> !<span class="variable language_">this</span>.<span class="property">channels</span>.<span class="title function_">some</span>(<span class="function"><span class="params">items</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="comment">// ?</span></span><br><span class="line">          <span class="keyword">return</span> items.<span class="property">id</span> === item.<span class="property">id</span></span><br><span class="line">        &#125;)</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>

<h2 id="some-item-gt-条件判断-筛选数组方法-有一个满足"><a href="#some-item-gt-条件判断-筛选数组方法-有一个满足" class="headerlink" title="some(item=&gt;{条件判断}) 筛选数组方法(有一个满足)"></a><code>some(item=&gt;&#123;条件判断&#125;)</code> 筛选数组方法(有一个满足)</h2><ul>
<li><code>some()</code>不会创建一个新数组 <code>some()</code> 方法用于检测数组中的元素是否满足指定条件（函数提供）。</li>
<li>如果有一个元素满足条件，则表达式返回<em>true</em> , 剩余的元素不会再执行检测。</li>
<li><code>some()</code>和 <code>forEach()</code>一样 都可以遍历 并且支持暂停遍历<ul>
<li>终止遍历 <code>return true</code></li>
</ul>
</li>
<li>如果没有满足条件的元素，则返回false。<ul>
<li><strong>注意：</strong> some() 不会对空数组进行检测。</li>
<li><strong>注意：</strong> some() 不会改变原始数组。</li>
</ul>
</li>
<li>通常和 <code>filter()</code>方法使用</li>
</ul>
<blockquote>
<p>简单的some()案例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">4</span>,<span class="number">69</span>,<span class="number">56</span>,<span class="number">89</span>]</span><br><span class="line"><span class="comment">// 如果有超过88的 就返回true</span></span><br><span class="line">　　　　 <span class="keyword">var</span> some1=a.<span class="title function_">some</span>(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> item &gt; <span class="number">88</span></span><br><span class="line">    &#125;)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(some1)<span class="comment">//true</span></span><br></pre></td></tr></table></figure>

<h2 id="every-item-gt-条件判断-筛选数组方法-所有满足"><a href="#every-item-gt-条件判断-筛选数组方法-所有满足" class="headerlink" title="every(item=&gt;{条件判断}) 筛选数组方法(所有满足)"></a><code>every(item=&gt;&#123;条件判断&#125;)</code> 筛选数组方法(所有满足)</h2><ul>
<li><p>大致和<code>some()</code>方法一致 </p>
</li>
<li><p>every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。</p>
<p>every() 方法使用指定函数检测数组中的所有元素：</p>
<ul>
<li>如果数组中检测到有一个元素不满足，则整个表达式返回 <em>false</em> ，且剩余的元素不会再进行检测。</li>
<li>如果所有元素都满足条件，则返回 true。</li>
</ul>
</li>
<li><p><strong>注意：</strong> every() 不会对空数组进行检测。</p>
<p><strong>注意：</strong> every() 不会改变原始数组。</p>
</li>
<li><p><code>every()</code>是所有条件都满足 才会返回true <code>some</code>有一个满足就返回true</p>
</li>
</ul>
<blockquote>
<p>简单的every()案例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">4</span>,<span class="number">69</span>,<span class="number">56</span>,<span class="number">89</span>]</span><br><span class="line"><span class="comment">// 如果都超过0 返回true</span></span><br><span class="line">　　　　 <span class="keyword">var</span> some1=a.<span class="title function_">every</span>(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">              <span class="keyword">return</span> item &gt; <span class="number">0</span></span><br><span class="line">          &#125;)</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(some1)</span><br></pre></td></tr></table></figure>



<h2 id="find-item-gt-筛选条件-筛选数组符合条件内容"><a href="#find-item-gt-筛选条件-筛选数组符合条件内容" class="headerlink" title="find(item=&gt;{筛选条件}) 筛选数组符合条件内容"></a><code>find(item=&gt;&#123;筛选条件&#125;)</code> 筛选数组符合条件内容</h2><ul>
<li><code>find()</code>不会修改原对象(数组) 但是<font color = #ff3040>会返回一个符合条件的对象</font></li>
<li>当数组中的元素在测试条件时返回 true 时, <code>find()</code> 返回符合条件的元素，之后的值不会再调用执行函数。</li>
<li>如果没有符合条件的元素返回 undefined</li>
<li><strong>注意:</strong> <code>find()</code> 对于空数组，函数是不会执行的。</li>
<li>可以设置索引值的参数 array.find(function(当前元素, 索引值, 当前元素所属的数组对象))</li>
</ul>
<blockquote>
<p>基于Vue进行的find()筛选 (作用域插槽传来的数据例子)</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">formatHireTyp (type) &#123; <span class="comment">// 接收作用域插槽传来的数据</span></span><br><span class="line">  <span class="comment">// 使用find方法 查询符合格式化的数据</span></span><br><span class="line">  <span class="keyword">const</span> obj = <span class="title class_">Types</span>.<span class="property">hireType</span>.<span class="title function_">find</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123; <span class="comment">// 导入格式化规则</span></span><br><span class="line">    <span class="keyword">return</span> item.<span class="property">id</span> === type <span class="comment">// 格式化条件 查询 作用域插槽传来的数据</span></span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="comment">// 把查完的结果 return返回 返回给作用域插槽</span></span><br><span class="line">  <span class="comment">// 进行判断 如果查询到存在筛选内容 那就赋值给其正式的数据 如果没查到 返回原数据</span></span><br><span class="line">  <span class="keyword">return</span> obj ? obj.<span class="property">value</span> : type</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<h2 id="forEach-item-index-gt-循环遍历"><a href="#forEach-item-index-gt-循环遍历" class="headerlink" title="forEach((item,index)=&gt;{}) 循环遍历"></a><code>forEach((item,index)=&gt;&#123;&#125;)</code> 循环遍历</h2><ul>
<li>不会生成一个新数组 会直接改变原数组</li>
<li>本质上等同于 for 循环，对每一项执行 function 函数。</li>
<li>没有返回值(return)</li>
<li>forEach循环遍历的时候 不能终止 只能从头遍历到结尾</li>
<li><font color=#ff340>**注意: **</font>该方法会改变原始数组。</li>
</ul>
<blockquote>
<p>筛除3号数字 </p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"></span><br><span class="line">arr.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">item</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (item === <span class="number">3</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(item);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="indexOf-quot-quot-查找下标-索引值"><a href="#indexOf-quot-quot-查找下标-索引值" class="headerlink" title="indexOf(&quot;&quot;) 查找下标(索引值)"></a><code>indexOf(&quot;&quot;)</code> 查找下标(索引值)</h2><ul>
<li>查找 对应数据的索引值 <ul>
<li>如果存在 返回相应的索引值</li>
<li>如果不存在  返回 -1 (区分大小写)</li>
</ul>
</li>
</ul>
<blockquote>
<p>查询相应内容的下标</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> str=[<span class="string">&quot;123&quot;</span>,<span class="string">&quot;321&quot;</span>,<span class="string">&quot;111&quot;</span>]</span><br><span class="line"></span><br><span class="line">str.<span class="title function_">indexOf</span>(<span class="string">&quot;123&quot;</span>)</span><br><span class="line">str.<span class="title function_">indexOf</span>(<span class="string">&quot;321&quot;</span>)</span><br><span class="line">str.<span class="title function_">indexOf</span>(<span class="string">&quot;666&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"><span class="comment">// 返回的数值</span></span><br><span class="line"><span class="number">0</span></span><br><span class="line"><span class="number">1</span></span><br><span class="line">-<span class="number">2</span></span><br></pre></td></tr></table></figure>

<h2 id="includes-判断数组是否包含指定的值"><a href="#includes-判断数组是否包含指定的值" class="headerlink" title="includes()  判断数组是否包含指定的值"></a><code>includes() </code> 判断数组是否包含指定的值</h2><ul>
<li>includes() 方法用来判断一个数组是否包含一个指定的值。</li>
<li>如果是返回 true，否则false</li>
</ul>
<blockquote>
<p>简单判断流程</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> site = [<span class="string">&#x27;runoob&#x27;</span>, <span class="string">&#x27;google&#x27;</span>, <span class="string">&#x27;taobao&#x27;</span>];</span><br><span class="line"> </span><br><span class="line">site.<span class="title function_">includes</span>(<span class="string">&#x27;runoob&#x27;</span>); </span><br><span class="line"><span class="comment">// true </span></span><br><span class="line"> </span><br><span class="line">site.<span class="title function_">includes</span>(<span class="string">&#x27;baidu&#x27;</span>); </span><br><span class="line"><span class="comment">// false</span></span><br></pre></td></tr></table></figure>

<h2 id="splice-数组删除添加二合一"><a href="#splice-数组删除添加二合一" class="headerlink" title="splice() 数组删除添加二合一"></a><code>splice()</code> 数组删除添加二合一</h2><ul>
<li>splice() 方法向&#x2F;从数组中添加&#x2F;删除项目，然后返回被删除的项目。</li>
<li>这个方法 不会生成 新数组 会直接改变原来数组</li>
<li>通常用作删除功能</li>
</ul>
<p><font color=#ff340>**注意: **</font>该方法会改变原始数组。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arrayObject.<span class="title function_">splice</span>(index,howmany,item1,.....,itemX)</span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th align="left">参数</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">index</td>
<td align="left">必需。整数，规定添加&#x2F;删除项目的位置，使用负数可从数组结尾处规定位置。</td>
</tr>
<tr>
<td align="left">howmany</td>
<td align="left">必需。要删除的项目数量。如果设置为 0，则不会删除项目。</td>
</tr>
<tr>
<td align="left">item1, …, itemX</td>
<td align="left">可选。向数组添加的新项目。</td>
</tr>
</tbody></table>
<blockquote>
<p><code>splice()</code> 用作删除 示例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 在页面数据历史记录 找到指定索引 进行删除 index是索引 1是删除一个</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">history</span>.<span class="title function_">splice</span>(index, <span class="number">1</span>)</span><br></pre></td></tr></table></figure>

<h2 id="replace-数组替换内容方法"><a href="#replace-数组替换内容方法" class="headerlink" title="replace() 数组替换内容方法"></a><code>replace()</code> 数组替换内容方法</h2><ul>
<li>replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。</li>
<li>此方法不会创建一个新数组 会直接改变原来数组</li>
<li>通常配合正则表达式来替换内容</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">w = kw.<span class="title function_">replace</span>(reg, <span class="variable language_">this</span>.<span class="property">q</span>) <span class="comment">// 替换方法 replace(替换规则,替换数据)</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th align="left">参数</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">regexp&#x2F;substr</td>
<td align="left">必需。规定子字符串或要替换的模式的 RegExp 对象。请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。</td>
</tr>
<tr>
<td align="left">replacement</td>
<td align="left">必需。一个字符串值。规定了替换文本或生成替换文本的函数。</td>
</tr>
</tbody></table>
<blockquote>
<p>使用正则表达式 配合<code>replace</code>替换内容</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// kw此时包括span高亮的标签，需要去掉</span></span><br><span class="line"><span class="keyword">const</span> reg = <span class="keyword">new</span> <span class="title class_">RegExp</span>(<span class="string">`&lt;span&gt;<span class="subst">$&#123;<span class="variable language_">this</span>.q&#125;</span>&lt;/span&gt;`</span>, <span class="string">&#x27;ig&#x27;</span>) <span class="comment">//RegExp是正则表达式 对象模式 </span></span><br><span class="line">kw.<span class="title function_">replace</span>(reg, <span class="variable language_">this</span>.<span class="property">q</span>) <span class="comment">// 替换方法 replace(替换的规则,需要替换的数据)</span></span><br></pre></td></tr></table></figure>



<h2 id="new-set-数组去重方法"><a href="#new-set-数组去重方法" class="headerlink" title="new set() 数组去重方法"></a><code>new set()</code> 数组去重方法</h2><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/types/BrowserSetting/set">MDN官网介绍</a></p>
<ul>
<li>ES6 提供了新的数据结构 <code>new Set</code>。它类似于数组，但是成员的值都是唯一的，没有重复的值<ul>
<li>设置该方法时候 需要在前面加 <code>new</code> 创建一个新对象</li>
</ul>
</li>
<li>需要手动 设置新数组 并且添加进去</li>
<li><code>new set()</code>自带很多自己的方法</li>
</ul>
<blockquote>
<p><code>set()</code>方法去除数组重复 示例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ~ 3. 进行搜索数据的去重 new Set() 方法去重后自动生成数组 把没有重复的数组覆盖到 原先数组中</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">history</span> = [...<span class="keyword">new</span> <span class="title class_">Set</span>(<span class="variable language_">this</span>.<span class="property">history</span>)]</span><br></pre></td></tr></table></figure>

<h2 id="push-数组添加方法"><a href="#push-数组添加方法" class="headerlink" title="push() 数组添加方法"></a><code>push()</code> 数组添加方法</h2><ul>
<li>把数据添加到数组末尾 对原数据不会有修改 不会覆盖 只是添加到末尾</li>
<li><font color =#ff3040>注意: 该方法会直接对原数组进行操作 </font></li>
</ul>
<blockquote>
<p><code>push()</code> 方法 添加数据 示例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 把服务器 获取的数据 储存到页面对象里 需要使用 push方法 因为分页是动态获取数据 需要用push添加 不覆盖之前数据</span></span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">push</span>(...ret.<span class="property">data</span>.<span class="property">results</span>) <span class="comment">// ... 是把所有数据储存起来</span></span><br></pre></td></tr></table></figure>

<h2 id="concat-数组连接-拼接-方法"><a href="#concat-数组连接-拼接-方法" class="headerlink" title="concat()数组连接(拼接)方法"></a><code>concat()</code>数组连接(拼接)方法</h2><ul>
<li><code>concat()</code> 方法用于连接两个或多个数组。<font color =#ff3040>注意; 只能拼接数组 不能拼其他的</font></li>
<li><font color =#ff3040>该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。通常需要用变量来接收</font></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> b = [<span class="number">5</span>,<span class="number">6</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> c = a.<span class="title function_">concat</span>(b); <span class="comment">// a,b 数组都不变，c变成了1,2,3,4,5,6 该方法并不会改变原数组</span></span><br></pre></td></tr></table></figure>

<h2 id="unshift-数组开头添方法"><a href="#unshift-数组开头添方法" class="headerlink" title="unshift() 数组开头添方法"></a><code>unshift()</code> 数组开头添方法</h2><ul>
<li>添加数据到数组开头 不会覆盖之前数据 只是添加到开头</li>
</ul>
<blockquote>
<p><code>unshift()</code> 方法 添加数据 示例 </p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ~ 把输入的内容 保存到历史关键字对象里 unshift会把数据添加到第一项 push是默认添加到结尾</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">history</span>.<span class="title function_">unshift</span>(<span class="variable language_">this</span>.<span class="property">q</span>)</span><br></pre></td></tr></table></figure>

<h2 id="add-数组添加方法"><a href="#add-数组添加方法" class="headerlink" title="add() 数组添加方法"></a><code>add()</code> 数组添加方法</h2><ul>
<li>把数据添加到数组内 会覆盖原先的数据</li>
</ul>
<blockquote>
<p><code>add()</code> 方法添加数据 示例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">add</span>(...ret.<span class="property">data</span>.<span class="property">results</span>) </span><br></pre></td></tr></table></figure>

<h2 id="toString-对象转字符串方法"><a href="#toString-对象转字符串方法" class="headerlink" title="toString() 对象转字符串方法"></a><code>toString()</code> 对象转字符串方法</h2><ul>
<li>把对象转换为字符串格式<ul>
<li>通常解决 js获取过长id无法解读 用到<code> json-bigint</code>插件时候 把查分id的对象  转为字符串</li>
</ul>
</li>
</ul>
<blockquote>
<p>把对象转换为字符串 (Vue的key只是别字符串)</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">:key=<span class="string">&quot;item.art_id.toString()</span></span><br></pre></td></tr></table></figure>

<h2 id="split-39-39-字符串分割成字符串数组"><a href="#split-39-39-字符串分割成字符串数组" class="headerlink" title="split(&#39;,&#39;) 字符串分割成字符串数组"></a><code>split(&#39;,&#39;)</code> 字符串分割成字符串数组</h2><ul>
<li><code>split()</code> 会创建一个新的字符串数组 但不会改变原始字符串</li>
<li><code>split()</code> 方法用于把一个字符串分割成字符串数组。</li>
<li>数组字符串通过是 , 隔开 </li>
<li>把字符串转成 字符串数组 可以方便循环遍历 在页面渲染出来</li>
</ul>
<blockquote>
<p>把符合条件的内容 从字符串分割成字符串数组</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (state.<span class="property">movie</span>.<span class="property">tags</span>) &#123; <span class="comment">// 满足条件 把字符串分割为 字符串数组</span></span><br><span class="line">    state.<span class="property">movie</span>.<span class="property">tags</span> = state.<span class="property">movie</span>.<span class="property">tags</span>.<span class="title function_">split</span>(<span class="string">&#x27;,&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="includes-判断数组是否包含一个指定的值"><a href="#includes-判断数组是否包含一个指定的值" class="headerlink" title="includes() 判断数组是否包含一个指定的值"></a><code>includes()</code> 判断数组是否包含一个指定的值</h2><ul>
<li>返回的值是布尔值<ul>
<li>如果含有 返回true </li>
<li>如果不含 返回false</li>
</ul>
</li>
<li>可以判断路径地址</li>
</ul>
<blockquote>
<p>设置路径白名单 判断是否在该路径下 </p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建一个路径白名单 里面填写的是路径 (允许用户游客模式访问一些内容 比如登录页 404 没必要验证)</span></span><br><span class="line"><span class="keyword">const</span> white = [<span class="string">&#x27;/login&#x27;</span>, <span class="string">&#x27;/404&#x27;</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 判断是否处于该路径地址</span></span><br><span class="line"> <span class="keyword">if</span> (white.<span class="title function_">includes</span>(to.<span class="property">path</span>))&#123;</span><br><span class="line"> </span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>

<h2 id="slice-分割数组方法"><a href="#slice-分割数组方法" class="headerlink" title="slice() 分割数组方法"></a><code>slice()</code> 分割数组方法</h2><ul>
<li><code>slice()</code>方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。</li>
<li>不会修改原数组 但会返回一个分割后的新数组(浅拷贝)</li>
</ul>
<blockquote>
<p>简单小案例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> fruits = [<span class="string">&quot;Banana&quot;</span>, <span class="string">&quot;Orange&quot;</span>, <span class="string">&quot;Lemon&quot;</span>, <span class="string">&quot;Apple&quot;</span>, <span class="string">&quot;Mango&quot;</span>];</span><br><span class="line"><span class="keyword">let</span> citrus = fruits.<span class="title function_">slice</span>(<span class="number">1</span>,<span class="number">3</span>);</span><br></pre></td></tr></table></figure>

<h2 id="reduce-gt-初始值可不写-把数组中的所有项进行拼接"><a href="#reduce-gt-初始值可不写-把数组中的所有项进行拼接" class="headerlink" title="reduce(()=&gt;{},初始值可不写) 把数组中的所有项进行拼接"></a><code>reduce(()=&gt;&#123;&#125;,初始值可不写)</code> 把数组中的所有项进行拼接</h2><ul>
<li><code>reduce()</code> 可以把数组中所有项目进行拼接 <ul>
<li>拼接格式 必须是: 参数1+参数2+…… (参数1必须在最前)</li>
</ul>
</li>
<li>不会修改原数组的数据 但是会返回一个拼接后的新数组</li>
<li><font color =#ff3040>需要return</font></li>
<li><code>reduce()</code> 有四个参数<ul>
<li>item代表一次回调的值 初始值为0</li>
<li>cart代表当前元素的值</li>
<li>index当前下标</li>
<li>arr原数组</li>
<li>对象结尾是 初始值</li>
</ul>
</li>
<li>通常可以代替循环遍历 拼接数据</li>
</ul>
<blockquote>
<p>简单的<code>reduce()</code> 使用</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a=[<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>]</span><br><span class="line"><span class="comment">//item代表一次回调的值 初始值为0</span></span><br><span class="line"><span class="comment">//cart代表当前元素的值</span></span><br><span class="line"><span class="comment">//index当前下标</span></span><br><span class="line"><span class="comment">//arr原数组</span></span><br><span class="line"><span class="keyword">let</span> num=a.<span class="title function_">reduce</span>(<span class="function">(<span class="params">item,cart,index,arr</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> item+=cart</span><br><span class="line">&#125;,<span class="number">0</span>)<span class="comment">//初始值为0 从0开始</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num) <span class="comment">//输出为30</span></span><br></pre></td></tr></table></figure>

        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5>本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://cuishikang.gitee.io/2021/06/24/JavaScript/0.4_Arr_Method/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://cuishikang.gitee.io/2021/06/24/JavaScript/0.4_Arr_Method/";
            const title         = "「JS 常用的数组方法」";
            const excerpt       = `::: tip 介绍JS 常用的数组方法合集:::`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/tags/%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95/" rel="tag">数组方法</a>
                </div>
                <div class="pull-date">
                <span>最后编辑：2022-02-19</span>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" 函数节流和函数防抖的设置与原理" href="/2021/06/20/JavaScript/4_throttle_and_debounce/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" 路由导航守卫(访问权限 白名单)" href="/2021/06/26/axios/axios_router/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="https://gitee.com/cuishikang/tmp/raw/master/img/20220220194141.png" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center"></p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                91
            </span>
        </a>
        <a class="meta-item" href="/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                13
            </span>
        </a>
        <a class="meta-item" href="/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                33
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Css/">Css</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/RABC/">RABC</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vscode/">Vscode</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a><span class="category-list-count">13</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/">Vue3</a><span class="category-list-count">25</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue%E7%A7%BB%E5%8A%A8%E5%A4%B4%E6%9D%A1%E9%A1%B9%E7%9B%AE/">Vue移动头条项目</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/animation/">animation</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/axios/">axios</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/other/">other</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/uniapp/">uniapp</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue-element-admin/">vue-element-admin</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/">小程序</a><span class="category-list-count">2</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/tags/Css/" style="font-size: 0.66em;">Css</a> <a href="/tags/H5Video/" style="font-size: 0.6em;">H5Video</a> <a href="/tags/JavaScript/" style="font-size: 0.74em;">JavaScript</a> <a href="/tags/My-project/" style="font-size: 0.6em;">My project</a> <a href="/tags/QQ/" style="font-size: 0.6em;">QQ</a> <a href="/tags/RABC/" style="font-size: 0.6em;">RABC</a> <a href="/tags/Vant/" style="font-size: 0.71em;">Vant</a> <a href="/tags/VeeValidate/" style="font-size: 0.6em;">VeeValidate</a> <a href="/tags/Vscode/" style="font-size: 0.6em;">Vscode</a> <a href="/tags/Vue/" style="font-size: 0.8em;">Vue</a> <a href="/tags/Vue-Router/" style="font-size: 0.6em;">Vue Router</a> <a href="/tags/Vue3/" style="font-size: 0.77em;">Vue3</a> <a href="/tags/Vuex/" style="font-size: 0.6em;">Vuex</a> <a href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 0.74em;">Vue移动端</a> <a href="/tags/Windows/" style="font-size: 0.6em;">Windows</a> <a href="/tags/animation/" style="font-size: 0.63em;">animation</a> <a href="/tags/axios/" style="font-size: 0.69em;">axios</a> <a href="/tags/echarts/" style="font-size: 0.6em;">echarts</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/2111/02/19/JavaScript/5_algorithm_tree/"><i class="fa  fa-book"></i> JavaScript树形数据转换算法</a>
            
          
        
          
          
            <a class="list-group-item" href="/2099/01/27/Vue3/1.1.1_Vue_study/"><i class="fa  fa-book"></i> Vue3 学习手册(博客版)</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/28/JavaScript/0.2_scroll/"><i class="fa  fa-book"></i> JS 滚动到指定位置和回到顶部</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/23/Vue/5_Vue_nextTick/"><i class="fa  fa-book"></i> 理解$nextTick</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/20/hello-world/"><i class="fa  fa-book"></i> Hello World</a>
            
          
        
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        
                        
                        <li><a target="_blank" rel="nofollow" href="https://t.me/CandyUnion"><i class="fa fa-telegram"></i></a></li>
                        
                        
                        
                        <li><a target="_blank" rel="me" href="https://nya.one/@Candinya"><i class="fa fa fa-share-alt-square"></i></a></li>
                        <li><a target="_blank" rel="nofollow" href="https://github.com/Candinya"><i class="fa fa-github"></i></a></li>
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2022 小崔的博客 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by cuishikang.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="https://unpkg.com/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/";
</script>


    <script async src="/js/candy.min.js"></script>



    <script defer src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="https://unpkg.com/meting@2/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="song"
        id="1375305989"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="https://unpkg.com/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script defer src="/js/kratosr.min.js"></script>
<script defer src="/js/pjax.min.js"></script>


    <script defer src="/js/kr-dark.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>